<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>

<div class="layui-fluid" id="app">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">


            <form class="layui-form" action="" lay-filter="component-form-group">
                <!--<div class="layui-card-header">表单组合</div>-->
                <div class="layui-card-body" style="padding: 15px;">


                    <input type="hidden" name="id" value="{$item.id}">

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="required|phone|number"
                                   autocomplete="off"
                                   id="phone"
                                   value="{$item.phone}"
                                   placeholder="请输入 手机号将作为等录账号"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="truename" lay-verify="required"
                                   autocomplete="off"
                                   id="truename"
                                   value="{$item.truename}"
                                   placeholder="请输入 "
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password"
                                   placeholder="留空 不修改密码"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>




                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>

                        <div class="layui-input-inline " style="width: auto;">

                            <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                                <img class="layui-upload-img"
                                     style="width: auto;height: 120px; object-fit: cover;"
                                     src="{$item.avatar2}">
                                <input type="hidden" name="avatar" value="{$item.avatar}">
                            </div>


                            <!--<div class="layui-btn layui-btn-primary" id="test10">-->
                            <!--<i class="layui-icon">点击上传</i>-->
                            <!--&lt;!&ndash;<p>点击上传</p>&ndash;&gt;-->
                            <!--</div>-->


                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" {if condition="$item.status==1"} checked=""{/if}>
                            <input type="radio" name="status" value="0" {if condition="$item.status==0"} checked=""{/if} title="禁用">

                        </div>
                    </div>


                    <div id="worker">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工种</label>
                            <div class="layui-input-block">
                                <!--<input type="text" name="gongzhong" lay-verify="required"-->
                                <!--autocomplete="off"-->
                                <!--placeholder="请输入 "-->
                                <!--class="layui-input">-->
                                <select name="worker[gongzhong]" lay-filter="aihao" id="gongzhong"
                                        lay-verify="required">
                                    <option value=""></option>
                                    <option value="拆除工"  >拆除工</option>
                                    <option value="木工" >木工</option>
                                    <option value="油工" >油工</option>
                                    <option value="水电工" >水电工</option>
                                    <option value="安装工" >安装工</option>
                                    <option value="瓦工" >瓦工</option>
                                    <option value="维修工" >维修工</option>

                                </select>
                            </div>
                        </div>



                        <script>

                            //设置选择状态
                            function setSelect(ele, val) {

                                $('#' + ele + ' option').each(function (index, ele) {
                                    var el = $(ele);
                                    if (el.attr('value') == val) {
                                        el.attr('selected', 'selected')
                                    } else {
                                        el.removeAttr('selected');
                                    }
                                })

                            }

                            $(function () {
                                setSelect('gongzhong', "{$worker.gongzhong}")
                            });

                        </script>

                        <div class="layui-form-item">
                            <label class="layui-form-label">工龄</label>
                            <div class="layui-input-block">
                                <input type="number" name="worker[gongling]" lay-verify="required"
                                       autocomplete="off"
                                       value="{$worker.gongling}"
                                       placeholder="请输入 "
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input type="number" name="worker[nianling]" lay-verify="required"
                                       autocomplete="off"
                                       value="{$worker.nianling}"
                                       placeholder="请输入 "
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">星级</label>
                            <div class="layui-input-block">

                                <input type="radio" name="worker[xingji]" value="3"
                                       {if condition="$worker.xingji==3"} checked=""{/if}
                                title="三星">
                                <input type="radio" name="worker[xingji]" value="4"
                                       {if condition="$worker.xingji==4"} checked=""{/if}
                                title="四星">
                                <input type="radio" name="worker[xingji]" value="5"
                                       {if condition="$worker.xingji==5"} checked=""{/if}
                                title="五星">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">服务人数</label>
                            <div class="layui-input-block">
                                <input type="text" name="worker[fuwushu]" lay-verify="required"
                                       autocomplete="off"
                                       value="{$worker.fuwushu}"
                                       placeholder="请输入 "
                                       value="1"
                                       class="layui-input">
                            </div>
                        </div>

                    </div>


                    <!--<div class="layui-form-item">-->
                    <!--<div class="layui-input-block">-->
                    <!--<div class="layui-footer">-->
                    <!--<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>-->
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->

                </div>

                <div class="layui-form-item form-footer2">
                    <div class="layui-input-block">
                        <div class="layui-footer">
                            <button class="layui-btn" lay-submit=""
                                    lay-filter="component-form-demo1">立即提交
                            </button>
                            <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>

    <script>


        layui.use(['form', 'laydate', 'upload'], function () {
            var $ = layui.$
                , element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form;
            var upload = layui.upload;

            form.render(null, 'component-form-group');

            laydate.render({
                elem: '#LAY-component-form-group-date'
            });

            /* 自定义验证规则 */
            form.verify({
                title: function (value) {
//      if(value.length < 5){
//        return '标题至少得5个字符啊';
//      }
                }
                , pass: [/(.+){6,12}$/, '密码必须6到12位']
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });


            form.on('checkbox(test)', function (data) {
//                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //是否被选中，true或者false
//                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
//                console.log(data.othis); //得到美化后的DOM对象
                if ($(data.elem).attr('name') == 'identity[worker]' && data.elem.checked) {
//                    console.log(11111);
                    $('#worker').fadeIn();
                } else if ($(data.elem).attr('name') == 'identity[worker]' && !data.elem.checked) {
//                    console.log(22222);
                    $('#worker').hide();
                }


            });

            //拖拽上传
            upload.render({
                elem: '#pic1'
                , url: '/tool/qiniu/upload'
                , before: function () {
                    layer.load(2);
                }
                , done: function (res) {
                    layer.closeAll();
                    console.log(res)
                    $('#pic1 img').attr('src', res.data.url);
                    $('#pic1 input').val(res.data.pic);
                }
            });


            /* 监听提交 */
            form.on('submit(component-form-demo1)', function (data) {

                $.post("{:url('worker_edit')}", data.field, function (res) {
                    if (res.code == 1) {

                        //将数据传入到父元素
//                        parent.app.items.push(data.field);
//                        $('.layui-form')[0].reset();
//                        $('#phone').val('');
                        parent.init();
                        parent.layer.closeAll();
                        parent.layer.msg(res.msg, {icon: 1})

                        return false;
                    } else {
                        parent.layer.msg(res.msg, {icon: 2})
                        return false;
                    }
                });


                return false;
            });
        });
    </script>

</body>
</html>










